<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rate Distribution Curve</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="450"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Configuration ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 2;
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Coordinate System Parameters ---
const originX = 60;
const originY = 380;
const axisLengthX = 400;
const axisLengthY = 350;

// Coordinates for key points based on v₀ and A
const v0_x = originX + 150;
const v0_2x = originX + 300;
const A_y = originY - 150;

// --- Draw Axes ---
ctx.beginPath();
// X-axis
ctx.moveTo(originX, originY);
ctx.lineTo(originX + axisLengthX, originY);
// Y-axis
ctx.moveTo(originX, originY);
ctx.lineTo(originX, originY - axisLengthY);
ctx.stroke();

// X-axis arrowhead
ctx.beginPath();
ctx.moveTo(originX + axisLengthX, originY);
ctx.lineTo(originX + axisLengthX - 10, originY - 5);
ctx.lineTo(originX + axisLengthX - 10, originY + 5);
ctx.closePath();
ctx.fill();

// Y-axis arrowhead
ctx.beginPath();
ctx.moveTo(originX, originY - axisLengthY);
ctx.lineTo(originX - 5, originY - axisLengthY + 10);
ctx.lineTo(originX + 5, originY - axisLengthY + 10);
ctx.closePath();
ctx.fill();

// --- Draw the Graph ---
ctx.beginPath();
ctx.moveTo(originX, originY); // Start at origin (0,0)
ctx.lineTo(v0_x, A_y);      // Line to (v₀, A)
ctx.lineTo(v0_2x, A_y);     // Line to (2v₀, A)
ctx.stroke();

// --- Draw Dashed Lines ---
ctx.save(); // Save current state (solid line, lineWidth=2)
ctx.lineWidth = 1;
ctx.setLineDash([5, 5]);

// Vertical dash from x-axis to graph at v₀
ctx.beginPath();
ctx.moveTo(v0_x, originY);
ctx.lineTo(v0_x, A_y);
ctx.stroke();

// Horizontal dash from y-axis to graph at A
ctx.beginPath();
ctx.moveTo(originX, A_y);
ctx.lineTo(v0_x, A_y);
ctx.stroke();

// Vertical dash from x-axis to graph at 2v₀
ctx.beginPath();
ctx.moveTo(v0_2x, originY);
ctx.lineTo(v0_2x, A_y);
ctx.stroke();

ctx.restore(); // Restore to solid, thicker lines

// --- Add Labels ---
// Axis labels
ctx.font = 'italic 20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('v', originX + axisLengthX, originY + 10);
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillText('f(v)', originX - 15, originY - axisLengthY + 20);

// Coordinate labels
ctx.font = '20px Times New Roman';
// O (Origin)
ctx.textAlign = 'right';
ctx.textBaseline = 'top';
ctx.fillText('O', originX - 5, originY + 5);

// A
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillText('A', originX - 10, A_y);

// v₀ and 2v₀
ctx.font = '20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
ctx.fillText('v\u2080', v0_x, originY + 5);
ctx.fillText('2v\u2080', v0_2x, originY + 5);

// Caption
ctx.font = '20px "SimSun", "Songti SC"'; // Use a font that supports Chinese characters
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('习题 5-13 图', canvas.width / 2, canvas.height - 10);

</script>

</body>
</html>